<template>
    <el-container class="home-box">
        <el-header>
            <div>
                <img src="../assets/imgs/shop.png" alt  />
                <span>电商后台管理系统</span>
            </div>
            <div>
                <span>欢迎您：admin </span>
                <el-button type="danger" size="small">退出</el-button>
            </div>
        </el-header>
        <el-container>
            <!-- 左侧导航栏 -->
            <el-aside :width="isCollapse==true ? 64 + 'px' : 200 + 'px'">
                        <el-menu default-active="2" 
                        class="el-menu-vertical-demo" 
                        :collapse="isCollapse"
                        unique-opened
                        router
                         >
                            <el-radio-group v-model="isCollapse" style="margin-bottom: 10px;" class="toggle-button">
                                 <div @click="isCollapse=!isCollapse">|||</div>
                            </el-radio-group>
                            <el-submenu :index="pm.id+''"  v-for="pm in menu" :key="pm.id">
                                <template #title>
                                <i class="iconfont" :class="'icon-'+pm.path"></i>
                                <span>{{ pm.authName }}</span>
                                </template>
                                <el-menu-item  v-for="cm in pm.children" 
                                :key="cm.id" 
                                :route="{name:cm.path}" 
                                :index="cm.id+''">
                                            <i class="el-icon-menu"></i>
                                            <span>{{ cm.authName}}</span>     
                                </el-menu-item>
                            </el-submenu>
                        </el-menu>
            </el-aside>
            <!-- 组件展示区 -->
            <el-main>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item v-for=" (tip,index) in $route.meta.tip" :key="index" 
                    >{{tip.name}}</el-breadcrumb-item>
                </el-breadcrumb>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import { mapActions, mapState } from 'vuex'
  export default {
    data() {
      return {
        isCollapse: false,
        // menu:[]
      }
    },
    computed:{
          ...mapState(["menu"])
    },
    methods: {
          ...mapActions(["getMenu"]),
    // async    getMenu(){
    //         let menu= await this.$api.doMenus()
    //         this.menu=menu
    //     }
    },
    // mounted(){
    //     this.getMenu();
    // }
  }
</script>
<style lang="less" scoped>
.home-box {
    height: 100%;
    background-color: @homepage;
}
.el-header {
    background-image:url("../assets/imgs/header_bg.gif");
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 54px !important;
}
.el-header > div:first-child {
    img {
        width: 40px;
        line-height: 60px;
        vertical-align: middle;
        padding-right: 15px;
    }
    span {
        font-size: 20px;
        color: @white;
        vertical-align: middle;
    }
}
.el-header > div:last-child {
    span {
        color: @white;
        padding-right: 5px;
    }
}
.el-menu{
    height: 100%;
} 
.el-submenu span{
    font-size: 14px;
}
.el-aside  .toggle-button {
    background: #60779d;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: .2rem;
    cursor: pointer;
    width: 100%;
}
</style>